import React, { useEffect, useState } from "react";
import "./step2.css";
import Index from "../../../components/bg";
import { useNavigate } from "react-router";

const Step2 = () => {
  const [formData, setFormData] = useState(() => {
    const savedData = localStorage.getItem("registerStep2");
    return savedData
      ? JSON.parse(savedData)
      :{
          
          purpose: "",
          position: "",
          isAgree: false,
        }
  });

  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value, type } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === "radio" ? value === "true" : value,
    }));
  };

  const handleNavigation = (direction) => {
    // 处理导航逻辑
    if (direction === "prev") {
      navigate("/step1");
    } else if (direction === "next") {
      navigate("/step3");
    }
  };

  // 当数据变化时保存到 localStorage
  useEffect(() => {
    localStorage.setItem("registerStep2", JSON.stringify(formData));
  }, [formData]);

  return (
    <div className="about-container">
      <Index />
      <div className="about-content">
        <div className="step-header">
          <span className="step-text">STEP 2/4</span>
          <h3>关于我</h3>
        </div>

        <div className="form-group">
          <label>您为什么要使用该服务？</label>
          <div className="select-wrapper">
            <select
              name="purpose"
              value={formData.purpose}
              onChange={handleChange}
            >
              <option value="工作">工作</option>
              <option value="学习">学习</option>
              <option value="其他">其他</option>
            </select>
            <span className="select-arrow">▼</span>
          </div>
        </div>

        <div className="form-group">
          <label>您的职位？</label>
          <div className="select-wrapper">
            <select
              name="position"
              value={formData.position}
              onChange={handleChange}
            >
              <option value="公司高管">公司高管</option>
              <option value="部门经理">部门经理</option>
              <option value="普通员工">普通员工</option>
            </select>
            <span className="select-arrow">▼</span>
          </div>
        </div>

        <div className="form-group">
          <label>您确认使用该服务吗？</label>
          <div className="radio-group">
            <label className="radio-label">
              <input
                type="radio"
                name="isAgree"
                value="true"
                checked={formData.isAgree === true}
                onChange={handleChange}
              />
              <span className="radio-custom"></span>
              <span>是</span>
            </label>
            <label className="radio-label">
              <input
                type="radio"
                name="isAgree"
                value="false"
                checked={formData.isAgree === false}
                onChange={handleChange}
              />
              <span className="radio-custom"></span>
              <span>否</span>
            </label>
          </div>
        </div>
      </div>
      <div className="navigation-buttons">
        <button
          className="prev-button"
          onClick={() => {
            handleNavigation("prev");
          }}
        >
          ← 上一步
        </button>
        <button
          className="next-button"
          onClick={() => {
            handleNavigation("next");
          }}
        >
          下一步 →
        </button>
      </div>
    </div>
  );
};

export default Step2;
